<!DOCTYPE html>
<html lang="zh-CN" dir="ltr">
  <head>
    <meta charset="utf-8">
    
    <title>树结构 Tree | FEI-UI-DESIGN</title>
    
    <meta name="generator" content="VitePress v1.0.0-rc.35">
    <link rel="preload stylesheet" href="/fei-ui-design/assets/style.UepqEusw.css" as="style">
    
    <script type="module" src="/fei-ui-design/assets/app.CtN_OfgH.js"></script>
    <link rel="preload" href="/fei-ui-design/assets/inter-roman-latin.bvIUbFQP.woff2" as="font" type="font/woff2" crossorigin="">
    <link rel="modulepreload" href="/fei-ui-design/assets/chunks/framework.hV4g2dZ1.js">
    <link rel="modulepreload" href="/fei-ui-design/assets/chunks/theme.XkHReBMm.js">
    <link rel="modulepreload" href="/fei-ui-design/assets/components_tree.md.LtXYhey_.lean.js">
    <link rel="icon" href="/fei-ui-design/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1, shrink-to-fit=no">
    <meta name="author" content="ymf">
    <meta name="google" content="nositelinkssearchbox">
    <meta hid="description" name="description" content="FEI-UI-DESIGN Framework Components for Vuejs">
    <meta property="og:description" content="FEI-UI-DESIGN Framework Components for Vuejs">
    <meta property="og:title" content="FEI-UI-DESIGN - Framework for Vuejs">
    <meta name="twitter:card" content="summary_large_image">
    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
  </head>
  <body><div aria-hidden="true" class="fei-popover fei-popper is-light" style="width:200px;z-index:2218;display:none;" id="fei-popper-5798" role="tooltip"><!--v-if--><!--[--><p><i class="f-iconfont f-icon-question-circle" style="color:var(--fei-color-danger);"></i> 确定切换吗？</p><div style="text-align:right;margin:0;"><button class="fei-button fei-button--mini fei-button--text" type="button"><!----><span class="fei-button__content" style=""><!--[-->取消<!--]--></span></button><button class="fei-button fei-button--primary fei-button--mini" type="button"><!----><span class="fei-button__content" style=""><!--[-->确定<!--]--></span></button></div><!--]--><div class="fei-popper__arrow" data-popper-arrow></div></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2219;display:none;" id="fei-popper-4505" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2220;display:none;" id="fei-popper-8408" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2221;display:none;" id="fei-popper-6540" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2222;display:none;" id="fei-popper-1946" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2223;display:none;" id="fei-popper-485" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2224;display:none;" id="fei-popper-3176" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2225;display:none;" id="fei-popper-4550" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2226;display:none;" id="fei-popper-8335" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2227;display:none;" id="fei-popper-6778" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2228;display:none;" id="fei-popper-3546" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2229;display:none;" id="fei-popper-1343" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2230;display:none;" id="fei-popper-2044" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2231;display:none;" id="fei-popper-2782" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2232;display:none;" id="fei-popper-8619" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2233;display:none;" id="fei-popper-7528" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2234;display:none;" id="fei-popper-8800" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2235;display:none;" id="fei-popper-2828" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2236;display:none;" id="fei-popper-1853" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2237;display:none;" id="fei-popper-796" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-dropdown__popper fei-popper is-light is-pure" style="z-index:2238;display:none;" id="fei-popper-5635" role="tooltip"><!--[--><!--[--><ul class="fei-dropdown-menu"><!--[--><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-edit-square"></i>编辑<!--]--></li><li class="fei-dropdown-item" aria-disabled="false" tabindex="-1"><!----><!--[--><i class="f-iconfont f-icon-delete"></i>删除<!--]--></li><!--]--></ul><!--]--><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-tree-select__popper undefined fei-popper is-light is-pure" style="z-index:2239;display:none;" id="fei-popper-5594" role="tooltip"><!--[--><div class="fei-scrollbar"><div class="fei-tree-select-panel__wrap fei-scrollbar__wrap fei-scrollbar__wrap--hidden-default" style=""><div class="fei-scrollbar__view" style=""><!--[--><div class="fei-tree-select-inner" style="min-width:;"><div class="fei-tree" role="tree"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="0"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="研发部"><!----> 研发部</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="1"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="后端组"><!----> 后端组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="2"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="前端组"><!----> 前端组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="3"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="UI设计"><!----> UI设计</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="4"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="测试组"><!----> 测试组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="5"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="运维组"><!----> 运维组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="6"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="项目部"><!----> 项目部</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="7"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="开发组"><!----> 开发组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="8"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="交付服务组"><!----> 交付服务组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="fei-tree__drop-indicator"></div></div></div><!--]--></div></div><!--[--><div class="fei-scrollbar__bar is-horizontal" style=""><div class="fei-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="fei-scrollbar__bar is-vertical" style=""><div class="fei-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-tree-select__popper undefined fei-popper is-light is-pure" style="z-index:2240;display:none;" id="fei-popper-7160" role="tooltip"><!--[--><div class="fei-scrollbar"><div class="fei-tree-select-panel__wrap fei-scrollbar__wrap fei-scrollbar__wrap--hidden-default" style=""><div class="fei-scrollbar__view" style=""><!--[--><div class="fei-tree-select-inner" style="min-width:;"><div class="fei-tree" role="tree"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="0"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="研发部"><!----> 研发部</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="1"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="后端组"><!----> 后端组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="2"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="前端组"><!----> 前端组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="3"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="UI设计"><!----> UI设计</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="4"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="测试组"><!----> 测试组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="5"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="运维组"><!----> 运维组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="6"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="项目部"><!----> 项目部</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="7"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="开发组"><!----> 开发组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="8"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="交付服务组"><!----> 交付服务组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="fei-tree__drop-indicator"></div></div></div><!--]--></div></div><!--[--><div class="fei-scrollbar__bar is-horizontal" style=""><div class="fei-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="fei-scrollbar__bar is-vertical" style=""><div class="fei-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--><!----></div><!--teleport anchor--><div aria-hidden="true" class="fei-tree-select__popper undefined fei-popper is-light is-pure" style="z-index:2241;display:none;" id="fei-popper-2665" role="tooltip"><!--[--><div class="fei-scrollbar"><div class="fei-tree-select-panel__wrap fei-scrollbar__wrap fei-scrollbar__wrap--hidden-default" style=""><div class="fei-scrollbar__view" style=""><!--[--><div class="fei-tree-select-inner" style="min-width:;"><div class="fei-tree" role="tree"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="0"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="研发部"><!----> 研发部</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="1"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="后端组"><!----> 后端组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="2"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="前端组"><!----> 前端组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="3"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="UI设计"><!----> UI设计</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="4"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="测试组"><!----> 测试组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="5"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="运维组"><!----> 运维组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="6"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="项目部"><!----> 项目部</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="7"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="开发组"><!----> 开发组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="8"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="交付服务组"><!----> 交付服务组</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="fei-tree__drop-indicator"></div></div></div><!--]--></div></div><!--[--><div class="fei-scrollbar__bar is-horizontal" style=""><div class="fei-scrollbar__thumb" style="width:0;transform:translateX(0%);ms-transform:translateX(0%);webkit-transform:translateX(0%);"></div></div><div class="fei-scrollbar__bar is-vertical" style=""><div class="fei-scrollbar__thumb" style="height:0;transform:translateY(0%);ms-transform:translateY(0%);webkit-transform:translateY(0%);"></div></div><!--]--></div><!--]--><!----></div><!--teleport anchor-->
    <div id="app"><div id="app" class="theme-container" data-v-818e4420><!----><div class="sidebar-mask" data-v-818e4420></div><main class="page" data-v-818e4420><header class="header-page"><a class="back-link"><i class="bx bx-left-arrow-alt"></i></a><div class="header__content"><div class="flex-header"><h1 id="header-title">树结构 Tree</h1><ul class="interactive-links"><li title="Package NPM"><a target="_blank" href="https://www.npmjs.com/package/fei-ui-design"><i class="bx bx-package"></i></a></li><li title="View Code Github"><a target="_blank" href="https://github.com/ymf-930/fei-ui-design"><i class="bx bx-code-alt"></i></a></li><li title="Edit Page"><a target="_blank"><i class="bx bx-edit"></i></a></li><li title="Report a Bug"><a target="_blank" href="https://github.com/ymf-930/fei-ui-design/issues/new?title=[树结构 Tree] - Your Bug Name&amp;body=**Steps to Reproduce**%0A1. Do something%0A2. Do something else.%0A3. Do one last thing.%0A%0A**Expected**%0AThe 树结构 Tree should do this%0A%0A**Result**%0AThe 树结构 Tree does not do this%0A%0A**Testcase**%0A(fork this to get started)%0Ahttp://jsfiddle.net/exmple-bug/1/"><i class="bx bx-bug"></i></a></li></ul></div></div><svg class="header-effect" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><path id="Trazado_200" data-name="Trazado 200" d="M0-10,150,0l10,150S137.643,80.734,100.143,43.234,0-10,0-10Z" transform="translate(0 10)" fill="#fff"></path></svg></header><aside class="sidebar"><div class="content-sidebar"><ul class="sidebar-sub-headers"><!--[--><!--]--></ul></div></aside><!--[--><!--]--><div class="vp-doc content__default"><div style="position:relative;"><div><h1 id="树结构-tree" tabindex="-1">树结构 Tree <a class="header-anchor" href="#树结构-tree" aria-label="Permalink to &quot;树结构 Tree&quot;">​</a></h1><div class="card"><div class="text"><!--[--><h2 id="基础用法" tabindex="-1">基础用法 <a class="header-anchor" href="#基础用法" aria-label="Permalink to &quot;基础用法&quot;">​</a></h2><p><code>lockSelect</code> 设置可以锁定树的选中事件，这个可以用来控制树菜单在不同情况下的操作</p><!--]--></div><div class="example"><div class="center"><!--[--><div flex><div style="width:300px;"><div class="fei-tree" role="tree"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="0"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="一级 1"><!----> 一级 1</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="1"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="二级 1-1"><!----> 二级 1-1</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="2"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="三级 1-1-1 我是超长字段我是超长字段我是超长字段"><!----> 三级 1-1-1 我是超长字段我是超长字段我是超长字段</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="3"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="三级 1-1-2"><!----> 三级 1-1-2</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="4"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="二级 1-2"><!----> 二级 1-2</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="5"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="三级 1-2-1"><!----> 三级 1-2-1</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="6"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="三级 1-2-2"><!----> 三级 1-2-2</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="fei-tree__drop-indicator"></div></div></div><div style="width:80px;"><!--[--><span tabindex="0" class="fei-switch fei-switch-large" style="" ariadescribedby="fei-popper-5798"><input type="hidden" value="false"><span class="fei-switch-inner"><!----><!--[-->解锁<!--]--></span><!----></span><!--teleport start--><!--teleport end--><!--]--></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> flex</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 300px&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        :lock-select</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;lockSelect&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        title-ellipsis</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        @select-change</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleSelect&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 80px&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-switch</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;lockSelect&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;large&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #open</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">锁定</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> #close</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">解锁</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-switch</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="额外参数配置" tabindex="-1">额外参数配置 <a class="header-anchor" href="#额外参数配置" aria-label="Permalink to &quot;额外参数配置&quot;">​</a></h2><p>可以配置额外参数设置，比如附加 id，code 等业务参数，也可以指定 title 显示的字段名称，默认为 <code>title</code></p><!--]--></div><div class="example"><div class="center"><!--[--><div><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->初始化数据并默认选中前端组<!--]--></span></button><div flex class="mt-10"><div style="width:300px;"><div class="fei-tree" role="tree"><div><div class="fei-empty fei-empty-normal" style="margin:16px 0;"><div class="fei-empty-image"><!--[--><svg class="fei-empty-img-simple" width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fill-rule="evenodd"><ellipse class="fei-empty-img-simple-ellipse" cx="32" cy="33" rx="32" ry="7"></ellipse><g class="fei-empty-img-simple-g" fill-rule="nonzero"><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" class="fei-empty-img-simple-path"></path></g></g></svg><!--]--></div><p class="fei-empty-description"><!--[-->暂无数据<!--]--></p></div></div><div style="display:none;" class="fei-tree__drop-indicator"></div></div></div></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;initData&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">初始化数据并默认选中前端组</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> flex</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> class</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;mt-10&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 300px&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> ref</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;treeRef&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> title-key</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;text&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @select-change</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleSelect&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="其他属性" tabindex="-1">其他属性 <a class="header-anchor" href="#其他属性" aria-label="Permalink to &quot;其他属性&quot;">​</a></h2><p>可以设置 show-checkbox 开启勾选，并可以设置数据格式中的默认选中</p><p>expand、selected、checked 和 disabled 可以设置展开，选中，勾选和禁用。multiple 开启多选</p><!--]--></div><div class="example"><div class="center"><!--[--><div flex><div class="p10" style="width:300px;border-right:1px solid #eeeeee;"><span class="fei-tag is-primary" style="color:;"><!----><!--[-->多选<!--]--><!----></span><div class="fei-divider fei-divider-horizontal" style="margin:8px 0;"><!----></div><div class="fei-tree" role="tree"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="0"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="一级 1"><!----> 一级 1</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="1"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="二级 1-1"><!----> 二级 1-1</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="2"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="三级 1-1-1 我是超长字段我是超长字段我是超长字段"><!----> 三级 1-1-1 我是超长字段我是超长字段我是超长字段</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="3"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="三级 1-1-2"><!----> 三级 1-1-2</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="4"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="二级 1-2"><!----> 二级 1-2</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="5"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="三级 1-2-1"><!----> 三级 1-2-1</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="6"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="三级 1-2-2"><!----> 三级 1-2-2</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="fei-tree__drop-indicator"></div></div></div><div class="p10" style="width:300px;border-right:1px solid #eeeeee;"><span class="fei-tag is-primary" style="color:;"><!----><!--[-->附加图标<!--]--><!----></span><div class="fei-divider fei-divider-horizontal" style="margin:8px 0;"><!----></div><div class="fei-tree" role="tree"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="0"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="导航"><i class="f-iconfont f-icon-apartment"></i> 导航</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="1"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="导航菜单"><i class="f-iconfont f-icon-menu"></i> 导航菜单</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="2"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="图钉"><i class="f-iconfont f-icon-pushpin"></i> 图钉</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="3"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="锚点"><i class="f-iconfont f-icon-attachment"></i> 锚点</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="4"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="面包屑"><i class="f-iconfont f-icon-right"></i> 面包屑</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="5"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="标签页"><i class="f-iconfont f-icon-project"></i> 标签页</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="fei-tree__drop-indicator"></div></div></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> flex</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> class</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;p10&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;primary&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">多选</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;margin: 8px 0&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        show-checkbox</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        multiple</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        @select-change</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleSelect&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        @check-change</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleChecked&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> class</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;p10&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;primary&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">附加图标</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;margin: 8px 0&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data1&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="树节点的操作" tabindex="-1">树节点的操作 <a class="header-anchor" href="#树节点的操作" aria-label="Permalink to &quot;树节点的操作&quot;">​</a></h2><p>树结构默认拍平了所有节点数组，并塞入了唯一的 nodeKey 值用于索引节点，这样可以方便快捷的获取和设置树的状态</p><!--]--></div><div class="example"><div class="center"><!--[--><div><div class="mb-16"><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->展开全部<!--]--></span></button><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->收起全部<!--]--></span></button><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->展开三级<!--]--></span></button><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->选择全部<!--]--></span></button><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->取消全选<!--]--></span></button><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->设置选中1-2及以下<!--]--></span></button><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->单选 1-2-1<!--]--></span></button><button class="fei-button fei-button--default fei-button--small" type="button"><!----><span class="fei-button__content" style=""><!--[-->清空单选和多选<!--]--></span></button></div><div style="width:300px;"><div class="fei-tree" role="tree"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="0"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="一级 1"><!----> 一级 1</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="1"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="二级 1-1"><!----> 二级 1-1</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="2"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="三级 1-1-1"><!----> 三级 1-1-1</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="3"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="三级 1-1-2"><!----> 三级 1-1-2</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="4"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="二级 1-2"><!----> 二级 1-2</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="5"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="三级 1-2-1"><!----> 三级 1-2-1</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="6"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="三级 1-2-2"><!----> 三级 1-2-2</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="7"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="一级 2"><!----> 一级 2</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="8"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="二级 2-1"><!----> 二级 2-1</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="9"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="二级 2-2"><!----> 二级 2-2</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="fei-tree__drop-indicator"></div></div></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> class</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;mb-16&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;expandAll&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">展开全部</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;collapseAll&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">收起全部</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;setExpand&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">展开三级</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;checkAll&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">选择全部</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;uncheckAll&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">取消全选</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;setChecked&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">设置选中1-2及以下</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;setSelected&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">单选 1-2-1</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> size</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;small&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;clear&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">清空单选和多选</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 300px&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> ref</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;treeRef&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> show-checkbox</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="异步加载子节点" tabindex="-1">异步加载子节点 <a class="header-anchor" href="#异步加载子节点" aria-label="Permalink to &quot;异步加载子节点&quot;">​</a></h2><!--]--></div><div class="example"><div class="center"><!--[--><div style="width:300px;"><div class="fei-tree" role="tree"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="0"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="root"><!----> root</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="1"><span class="fei-tree-arrow"><!----><!----></span><label class="fei-checkbox"><span class="fei-checkbox__input" tabindex="false" role="false" aria-checked="false"><span class="fei-checkbox__inner"></span><input class="fei-checkbox__original" type="checkbox" aria-hidden="false" value="false"></span><!----></label><!--[--><span class="fei-tree-title is-ellipsis has-checkbox" title="leaf"><!----> leaf</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--><div style="display:none;" class="fei-tree__drop-indicator"></div></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 300px&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> show-checkbox</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :load-data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;loadData&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="可以筛选" tabindex="-1">可以筛选 <a class="header-anchor" href="#可以筛选" aria-label="Permalink to &quot;可以筛选&quot;">​</a></h2><p>如果树结构层级较多，可配合过滤函数进行过滤筛选</p><!--]--></div><div class="example"><div class="center"><!--[--><div><div class="fei-input-wrapper fei-input-type-text fei-input-group-with-append fei-input-with-search" style="width:230px;"><!--[--><!----><input autocomplete="off" type="text" class="fei-input fei-input-with-suffix" placeholder="输入过滤条件后回车筛选" value="" number="false"><!----><span class="fei-input-suffix"><!----><i class="fei-input-icon fei-input-icon-normal fei-input-search-icon f-iconfont f-icon-search"></i><!----><!--[--><!----><!--]--><!----></span><!----><!----><!----><!--]--></div><div class="fei-divider fei-divider-horizontal" style="margin:14px 0;"><!----></div><div style="width:300px;"><div class="fei-tree" role="tree"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="0"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="江苏省"><!----> 江苏省</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="1"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="南京市"><!----> 南京市</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="2"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="玄武区"><!----> 玄武区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="3"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="鼓楼区"><!----> 鼓楼区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="4"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="建邺区"><!----> 建邺区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="5"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="秦淮区"><!----> 秦淮区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="6"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="无锡市"><!----> 无锡市</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="7"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="锡山区"><!----> 锡山区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="8"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="惠山区"><!----> 惠山区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="9"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="滨湖区"><!----> 滨湖区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="10"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="梁溪区"><!----> 梁溪区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="11"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="徐州市"><!----> 徐州市</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="12"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="鼓楼区"><!----> 鼓楼区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="13"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="云龙区"><!----> 云龙区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="14"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="泉山区"><!----> 泉山区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="15"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="铜山区"><!----> 铜山区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="16"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="贾汪区"><!----> 贾汪区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="17"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="沛县"><!----> 沛县</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="18"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="丰县"><!----> 丰县</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="19"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="睢宁县"><!----> 睢宁县</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="20"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="新沂市"><!----> 新沂市</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="21"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="邳州市"><!----> 邳州市</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="22"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="河北省"><!----> 河北省</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="23"><span class="fei-tree-arrow"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="石家庄"><!----> 石家庄</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="24"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="长安区"><!----> 长安区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="25"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="新华区"><!----> 新华区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="26"><span class="fei-tree-arrow"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="鼓楼区"><!----> 鼓楼区</span><!--]--></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="fei-tree__drop-indicator"></div></div></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-input</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;query&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      search</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      placeholder</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;输入过滤条件后回车筛选&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 230px&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      @search</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleFilter&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-input</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;margin: 14px 0&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 300px&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> ref</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;treeRef&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :filter-node-method</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;filterNode&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> highlight-filter</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="拖拽排序" tabindex="-1">拖拽排序 <a class="header-anchor" href="#拖拽排序" aria-label="Permalink to &quot;拖拽排序&quot;">​</a></h2><p>开启<code>draggable</code>可以开启树节点的拖拽功能，此时需要监听几个事件来进行数据处理</p><!--]--></div><div class="example"><div class="center"><!--[--><div flex><div class="p10" style="width:300px;border-right:1px solid #eeeeee;"><span class="fei-tag is-primary" style="color:;"><!----><!--[-->基础拖拽排序<!--]--><!----></span><div class="fei-divider fei-divider-horizontal" style="margin:8px 0;"><!----></div><div class="fei-tree" role="tree"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="0"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="一级 1"><!----> 一级 1</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="1"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="二级 1-1"><!----> 二级 1-1</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="2"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="三级 1-1-1"><!----> 三级 1-1-1</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="3"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="三级 1-1-2"><!----> 三级 1-1-2</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="4"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="二级 1-2"><!----> 二级 1-2</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="5"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="三级 1-2-1"><!----> 三级 1-2-1</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="6"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="三级 1-2-2"><!----> 三级 1-2-2</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="7"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="一级 2"><!----> 一级 2</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="8"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="二级 2-1"><!----> 二级 2-1</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="9"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="三级 2-1-1"><!----> 三级 2-1-1</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="10"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="三级 2-1-2"><!----> 三级 2-1-2</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="11"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="二级 2-2"><!----> 二级 2-2</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="12"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="三级 2-2-1"><!----> 三级 2-2-1</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="13"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><!--[--><span class="fei-tree-title is-ellipsis" title="三级 2-2-2"><!----> 三级 2-2-2</span><!--]--></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="fei-tree__drop-indicator"></div></div></div><div class="p10" style="width:300px;border-right:1px solid #eeeeee;"><span class="fei-tag is-primary" style="color:;"><!----><!--[-->自定义函数配置<!--]--><!----></span><div class="fei-divider fei-divider-horizontal" style="margin:8px 0;"><!----></div><div class="fei-tree" role="tree"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="0"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="数据维度-()"><i class="f-iconfont f-icon-" style="font-size:16px;margin-right:4px;color:#1a5cff;"></i>数据维度</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-4505" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="1"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="国家层级-()"><i class="f-iconfont f-icon-cluster" style="font-size:16px;margin-right:4px;color:#1a5cff;"></i>国家层级</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-8408" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="2"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="国家-(country)"><i class="f-iconfont f-icon-deploymentunit" style="font-size:16px;margin-right:4px;color:#1a5cff;"></i>国家</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-6540" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="3"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="省-(province)"><i class="f-iconfont f-icon-deploymentunit" style="font-size:16px;margin-right:4px;color:#1a5cff;"></i>省</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-1946" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="4"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="市-(city)"><i class="f-iconfont f-icon-deploymentunit" style="font-size:16px;margin-right:4px;color:#1a5cff;"></i>市</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-485" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="5"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="部门-()"><i class="f-iconfont f-icon-folder" style="font-size:16px;margin-right:4px;color:#1e1e1e;"></i>部门</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-3176" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="6"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="部门编号-(dept_code)"><i class="f-iconfont f-icon-deploymentunit" style="font-size:16px;margin-right:4px;color:#1a5cff;"></i>部门编号</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-4550" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="7"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="部门名称-(dept_name)"><i class="f-iconfont f-icon-deploymentunit" style="font-size:16px;margin-right:4px;color:#1a5cff;"></i>部门名称</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-8335" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="8"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="数据度量-()"><i class="f-iconfont f-icon-" style="font-size:16px;margin-right:4px;color:#1a5cff;"></i>数据度量</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-6778" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="9"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="默认-()"><i class="f-iconfont f-icon-folder" style="font-size:16px;margin-right:4px;color:#1e1e1e;"></i>默认</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-3546" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="10"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="统计-(count)"><i class="f-iconfont f-icon-linechart" style="font-size:16px;margin-right:4px;color:#46c93a;"></i>统计</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-1343" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="11"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="部门-()"><i class="f-iconfont f-icon-folder" style="font-size:16px;margin-right:4px;color:#1e1e1e;"></i>部门</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-2044" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="12"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="上级部门-(parent_dept)"><i class="f-iconfont f-icon-linechart" style="font-size:16px;margin-right:4px;color:#46c93a;"></i>上级部门</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-2782" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="true" data-key="13"><span class="fei-tree-arrow fei-tree-arrow-open"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="层级-(level)"><i class="f-iconfont f-icon-linechart" style="font-size:16px;margin-right:4px;color:#46c93a;"></i>层级</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-8619" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="fei-tree__drop-indicator"></div></div></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> flex</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> class</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;p10&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;primary&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">基础拖拽排序</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;margin: 8px 0&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        ref</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;treeRef&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        draggable</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        default-expand</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        @node-drag-start</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleDragStart&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        @node-drag-enter</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleDragEnter&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        @node-drag-leave</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleDragLeave&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        @node-drag-end</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleDragEnd&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        @node-drop</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleDrop&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> class</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;p10&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;primary&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">自定义函数配置</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;margin: 8px 0&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        :allow-drop</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;allowDrop&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        :allow-drag</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;allowDrag&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data1&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        :render</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;renderContent1&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        draggable</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        lock-select</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">        default-expand</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="render-函数" tabindex="-1">render 函数 <a class="header-anchor" href="#render-函数" aria-label="Permalink to &quot;render 函数&quot;">​</a></h2><p>使用 render 函数可以设置更多自定义的效果</p><!--]--></div><div class="example"><div class="center"><!--[--><div flex><div class="p10" style="width:300px;border-right:1px solid #eeeeee;"><span class="fei-tag is-primary" style="color:;"><!----><!--[-->新增移除<!--]--><!----></span><div class="fei-divider fei-divider-horizontal" style="margin:8px 0;"><!----></div><div class="fei-tree" role="tree"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="0"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="display:inline-flex;justify-content:space-between;width:100%;"><span>parent 1</span><i class="f-iconfont f-icon-plus-square-fill" style="font-size:16px;color:#1a5cff;margin-right:4px;"></i></span></span></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="1"><span class="fei-tree-arrow"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="display:inline-flex;justify-content:space-between;width:100%;"><span class="t-ellipsis" style="width:calc(100% - 36px);">child 1-1</span><span style="width:36px;"><i class="f-iconfont f-icon-plus-square-fill" style="font-size:16px;color:#5d6d7e;"></i><i class="f-iconfont f-icon-minus-square-fill" style="font-size:16px;color:#ff4757;"></i></span></span></span></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="2"><span class="fei-tree-arrow"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="display:inline-flex;justify-content:space-between;width:100%;"><span class="t-ellipsis" style="width:calc(100% - 36px);">child 1-2</span><span style="width:36px;"><i class="f-iconfont f-icon-plus-square-fill" style="font-size:16px;color:#5d6d7e;"></i><i class="f-iconfont f-icon-minus-square-fill" style="font-size:16px;color:#ff4757;"></i></span></span></span></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="fei-tree__drop-indicator"></div></div></div><div class="p10" style="width:300px;border-right:1px solid #eeeeee;"><span class="fei-tag is-primary" style="color:;"><!----><!--[-->下拉菜单<!--]--><!----></span><div class="fei-divider fei-divider-horizontal" style="margin:8px 0;"><!----></div><div class="fei-tree" role="tree"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="0"><span class="fei-tree-arrow fei-tree-arrow-open"><i class="f-iconfont f-icon-caret-right"></i><!--[--><!----><!--]--></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="导航"><i class="f-iconfont f-icon-apartment" style="margin-right:4px;"></i>导航</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-7528" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="" class="fei-tree-node-children"><!--[--><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="1"><span class="fei-tree-arrow"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="导航菜单"><i class="f-iconfont f-icon-menu" style="margin-right:4px;"></i>导航菜单</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-8800" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="2"><span class="fei-tree-arrow"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="图钉"><i class="f-iconfont f-icon-pushpin" style="margin-right:4px;"></i>图钉</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-2828" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="3"><span class="fei-tree-arrow"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="锚点"><i class="f-iconfont f-icon-attachment" style="margin-right:4px;"></i>锚点</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-1853" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="4"><span class="fei-tree-arrow"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="面包屑"><i class="f-iconfont f-icon-right" style="margin-right:4px;"></i>面包屑</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-796" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><ul class="fei-tree-children"><li style=""><div class="fei-tree-node" draggable="false" data-key="5"><span class="fei-tree-arrow"><!----><!----></span><!----><span class="fei-tree-render-title is-ellipsis"><span style="width:100%;font-size:12px;" flex="main:justify"><span class="t-ellipsis" style="width:calc(100% - 24px);" title="标签页"><i class="f-iconfont f-icon-project" style="margin-right:4px;"></i>标签页</span><!--[--><div class="fei-dropdown" aria-describedby="fei-popper-5635" style=""><!--[--><i class="f-iconfont f-icon-setting setting-action"></i><!--]--></div><!--teleport start--><!--teleport end--><!--]--></span></span></div><div style="display:none;" class="fei-tree-node-children"><!--[--><!--]--></div></li></ul><!--]--></div></li></ul><!--]--><div style="display:none;" class="fei-tree__drop-indicator"></div></div></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> flex</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> class</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;p10&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;primary&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">新增移除</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;margin: 8px 0&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> ref</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;tree&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :render</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;renderContent&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> class</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;p10&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 300px; border-right: 1px solid #eeeeee&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;primary&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">下拉菜单</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tag</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;margin: 8px 0&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data1&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :render</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;renderContent1&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="树选择" tabindex="-1">树选择 <a class="header-anchor" href="#树选择" aria-label="Permalink to &quot;树选择&quot;">​</a></h2><p>由于树选择场景较多，这里也额外封装了一个树形选择器以供表单进行节点选择</p><!--]--></div><div class="example"><div class="center"><!--[--><div><div flex><div flex><div class="fei-tree-select" style="width:300px;"><!--[--><div class="select-trigger" aria-describedby="fei-popper-5594" style=""><div class="fei-input-wrapper fei-input-wrapper-default fei-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="fei-input fei-input-default fei-input-with-suffix" placeholder="请选择" readonly value="00102" number="false"><!----><span class="fei-input-suffix"><!----><!----><!----><!--[--><i class="fei-select__caret f-iconfont f-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->设置默认选中前端组<!--]--></span></button></div><div flex class="ml-16"><div class="fei-tree-select" style="width:300px;"><!--[--><div class="select-trigger" aria-describedby="fei-popper-7160" style=""><div class="fei-input-wrapper fei-input-wrapper-default fei-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="fei-input fei-input-default fei-input-with-suffix" placeholder="请选择" readonly value="00102" number="false"><!----><span class="fei-input-suffix"><!----><!----><!----><!--[--><i class="fei-select__caret f-iconfont f-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->设置默认勾选项目部<!--]--></span></button></div></div><div class="pt-8 pb-8"><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->清空选择<!--]--></span></button></div><div>currentId：00102</div><div>currentNode：{}</div><div>checked：[]</div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> flex</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> flex</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree-select</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;currentId&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 300px&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          title-key</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;text&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          @change</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleChange&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree-select</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;defaultSelect&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">设置默认选中前端组</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> flex</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> class</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;ml-16&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree-select</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;currentId&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          v-model:checked</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;checked&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 300px&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          title-key</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;text&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          show-checkbox</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          @change</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleChange&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree-select</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;setChecked&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">设置默认勾选项目部</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> class</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;pt-8 pb-8&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;clear&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">清空选择</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">currentId：{{ currentId }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">currentNode：{{ currentNode }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">checked：{{ checked }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="树校验" tabindex="-1">树校验 <a class="header-anchor" href="#树校验" aria-label="Permalink to &quot;树校验&quot;">​</a></h2><p>可以结合form表单进行校验提示。</p><!--]--></div><div class="example"><div class="center"><!--[--><div><div flex><form class="fei-form"><!--[--><div class="fei-form-item is-required"><!--[--><label for="currentId" class="fei-form-item__label" style="width:85px;"><!--[-->树结构<!--]--><span class="item-suffix"></span></label><!--]--><div class="fei-form-item__content" style="width:calc(100% - 85px);"><!--[--><div class="fei-tree-select" style="width:300px;"><!--[--><div class="select-trigger" aria-describedby="fei-popper-2665" style=""><div class="fei-input-wrapper fei-input-wrapper-default fei-input-type-text"><!--[--><!----><input autocomplete="off" type="text" class="fei-input fei-input-default fei-input-with-suffix" placeholder="请选择" readonly value="00102" number="false"><!----><span class="fei-input-suffix"><!----><!----><!----><!--[--><i class="fei-select__caret f-iconfont f-icon-down"></i><!----><!--]--><!----></span><!----><!----><!----><!--]--></div></div><!--teleport start--><!--teleport end--><!--]--></div><!--]--><!----></div></div><div class="fei-form-item"><!--[--><!----><!--]--><div class="fei-form-item__content" style="width:calc(100% - 85px);padding-left:85px;"><!--[--><button class="fei-button fei-button--primary" type="button"><!----><span class="fei-button__content" style=""><!--[-->提交<!--]--></span></button><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->重置<!--]--></span></button><!--]--><!----></div></div><!--]--></form></div><div>currentId：00102</div><div>currentNode：{}</div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> flex</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-form</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> ref</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;ruleFormRef&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;obj&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> label-width</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;85px&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> :rules</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;ruleValidate&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-form-item</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> prop</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;currentId&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> label</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;树结构&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">          &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree-select</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">            v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;obj.currentId&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">            style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 300px&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">            :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;data&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">            title-key</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;text&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">            clearable</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">            @change</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleChange&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">          &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-tree-select</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-form-item</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-form-item</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">          &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> type</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;primary&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;submitForm&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">提交</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">          &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;resetForm&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">重置</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-form-item</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-form</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">currentId：{{ obj.currentId }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">currentNode：{{ currentNode }}</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><div class="card"><div class="text"><!--[--><h2 id="big-tree-超大数据" tabindex="-1">Big-Tree 超大数据 <a class="header-anchor" href="#big-tree-超大数据" aria-label="Permalink to &quot;Big-Tree 超大数据&quot;">​</a></h2><p>如果需要渲染超大数据量的属性结构，需要使用扩展组件<code>&lt;f-big-tree&gt;</code>,组件内部 api 基本复用树结构所有属性，对树形结构进行优化，利用可视区域位置来进行过滤筛选节点并进行操作， 但为了性能的提示必然要牺牲部分体验，因此大数据量的树结构不提供动画展开缩放效果</p><p>默认节点高度为<code>28px</code>，可通过<code>visible-count</code>指定树可是区域显示的节点个数，默认为 15 个 即<code>420px</code>因为是针对可视区域的滚动优化，因此必须指定容器高度</p><!--]--></div><div class="example"><div class="center"><!--[--><div><div style="margin-bottom:8px;"><div class="fei-space fei-space--horizontal" style="align-items:center;"><div class="fei-space__item" style="padding-bottom:0px;margin-right:8px;"><!--[--> 数据条数： <!--]--></div><div class="fei-space__item" style="padding-bottom:0px;margin-right:8px;"><!--[--><div class="fei-input-number" style="width:120px;"><!--[--><span class="fei-input-number-handler fei-input-number-handler-up"><span class="fei-input-number-handler-up-inner f-iconfont f-icon-up"></span></span><span class="fei-input-number-handler fei-input-number-handler-down"><span class="fei-input-number-handler-down-inner f-iconfont f-icon-down"></span></span><!--]--><div class="fei-input-number-input-wrap"><input class="fei-input-number-input" autocomplete="off" spellcheck="false" value="5000" placeholder=""></div></div><!--]--></div><div class="fei-space__item" style="padding-bottom:0px;margin-right:8px;"><!--[--><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->渲染<!--]--></span></button><!--]--></div><div class="fei-space__item" style="padding-bottom:0px;margin-right:8px;"><!--[--><div class="fei-input-wrapper fei-input-type-text fei-input-group-with-append fei-input-with-search" style="width:230px;"><!--[--><!----><input autocomplete="off" type="text" class="fei-input fei-input-with-suffix" placeholder="输入过滤条件后回车筛选" value="" number="false"><!----><span class="fei-input-suffix"><!----><i class="fei-input-icon fei-input-icon-normal fei-input-search-icon f-iconfont f-icon-search"></i><!----><!--[--><!----><!--]--><!----></span><!----><!----><!----><!--]--></div><!--]--></div><div class="fei-space__item" style="padding-bottom:0px;"><!--[--><div class="fei-button-group"><!--[--><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->展开所有<!--]--></span></button><button class="fei-button fei-button--default" type="button"><!----><span class="fei-button__content" style=""><!--[-->收起所有<!--]--></span></button><!--]--></div><!--]--></div></div></div><div class="fei-divider fei-divider-horizontal" style="margin:14px 0;"><!----></div><div class="fei-tree" style="position:relative;overflow:auto;height:280px;"><div><div class="fei-empty fei-empty-normal" style="margin:16px 0;"><div class="fei-empty-image"><!--[--><svg class="fei-empty-img-simple" width="64" height="41" viewBox="0 0 64 41" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0 1)" fill="none" fill-rule="evenodd"><ellipse class="fei-empty-img-simple-ellipse" cx="32" cy="33" rx="32" ry="7"></ellipse><g class="fei-empty-img-simple-g" fill-rule="nonzero"><path d="M55 12.76L44.854 1.258C44.367.474 43.656 0 42.907 0H21.093c-.749 0-1.46.474-1.947 1.257L9 12.761V22h46v-9.24z"></path><path d="M41.613 15.931c0-1.605.994-2.93 2.227-2.931H55v18.137C55 33.26 53.68 35 52.05 35h-40.1C10.32 35 9 33.259 9 31.137V13h11.16c1.233 0 2.227 1.323 2.227 2.928v.022c0 1.605 1.005 2.901 2.237 2.901h14.752c1.232 0 2.237-1.308 2.237-2.913v-.007z" class="fei-empty-img-simple-path"></path></g></g></svg><!--]--></div><p class="fei-empty-description"><!--[-->暂无数据<!--]--></p></div></div></div></div><!--]--></div></div><div class="slotcode"><div class="code" data-v-eb2a5129><div class="noti-code" data-v-eb2a5129><i class="bx bx-check" data-v-eb2a5129></i> Code copied </div><header class="header-codex" data-v-eb2a5129><ul data-v-eb2a5129><!----><!----><li title="Copy code" class="" data-v-eb2a5129><i class="bx bx-copy" data-v-eb2a5129></i></li><li title="View code" class="not-a con-link" data-v-eb2a5129><i class="bx bx-code-alt" data-v-eb2a5129></i></li></ul></header><div style="display:none;" class="con-code" data-v-eb2a5129><ul class="ul-codes" data-v-eb2a5129><li class="active" data-v-eb2a5129> Template </li><li class="" data-v-eb2a5129> Script </li><!----><li class="" data-v-eb2a5129> All </li></ul><div class="con-codes" data-v-eb2a5129><div class="slot-template slots" data-v-eb2a5129><!--[--><!--[--><div class="language-html vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">html</span><pre class="shiki shiki-themes rose-pine-moon rose-pine-moon vp-code"><code><span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;margin-bottom: 8px&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-space</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">        数据条数：</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-input-number</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;number&quot;</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 120px&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-input-number</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;init&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">渲染</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-input</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          v-model</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;query&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          search</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          placeholder</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;输入过滤条件后回车筛选&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;width: 230px&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">          @search</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleFilter&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-input</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button-group</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">          &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;expandAll&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">展开所有</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">          &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> @click</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;collapseAll&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span><span style="--shiki-light:#E0DEF4;--shiki-dark:#E0DEF4;">收起所有</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">        &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-button-group</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">      &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-space</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;"> style</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;margin: 14px 0&quot;</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-divider</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &lt;</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-big-tree</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      ref</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;treeRef&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      :data</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;treedata&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      :visible-count</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;10&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      :filter-node-method</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;filterNode&quot;</span></span>
<span class="line"><span style="--shiki-light:#C4A7E7;--shiki-dark:#C4A7E7;--shiki-light-font-style:italic;--shiki-dark-font-style:italic;">      @select-change</span><span style="--shiki-light:#908CAA;--shiki-dark:#908CAA;">=</span><span style="--shiki-light:#F6C177;--shiki-dark:#F6C177;">&quot;handleSelected&quot;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">    &gt;&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">f-big-tree</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">  &lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">div</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span>
<span class="line"><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&lt;/</span><span style="--shiki-light:#9CCFD8;--shiki-dark:#9CCFD8;">template</span><span style="--shiki-light:#6E6A86;--shiki-dark:#6E6A86;">&gt;</span></span></code></pre></div><!--]--><!--]--><footer title="View code" class="footer-code" data-v-eb2a5129><i class="bx bx-hide" data-v-eb2a5129></i></footer></div><!----><!----><!----></div></div></div></div></div><h2 id="props" tabindex="-1">Props <a class="header-anchor" href="#props" aria-label="Permalink to &quot;Props&quot;">​</a></h2><table><thead><tr><th>参数</th><th>说明</th><th>类型</th><th>可选值</th><th>默认值</th></tr></thead><tbody><tr><td>data</td><td>可嵌套的节点属性的数组，生成 tree 的数据</td><td>Array</td><td>—</td><td>[]</td></tr><tr><td>multiple</td><td>是否支持多选</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>show-checkbox</td><td>是否显示多选框</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>empty-text</td><td>没有数据时的提示</td><td>String</td><td>—</td><td>暂无数据</td></tr><tr><td>load-data</td><td>异步加载数据的方法，见示例</td><td>Function</td><td>—</td><td>—</td></tr><tr><td>title-key</td><td>定义 title 键,默认 title</td><td>String</td><td>—</td><td>title</td></tr><tr><td>children-key</td><td>定义子节点键,默认 children 为子节点 key</td><td>String</td><td>—</td><td>children</td></tr><tr><td>check-strictly</td><td>复选框的情况下，是否严格的遵循父子不互相关联的做法</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>check-directly</td><td>开启后，在 show-checkbox 模式下，select 的交互也将转为 check</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>lock-select</td><td>锁定树选择，再部分业务中常用，比如开启弹窗后禁用树的选中操作</td><td>Boolean</td><td>—</td><td>false</td></tr><tr><td>title-ellipsis</td><td>是否开启标题超长省略</td><td>Boolean</td><td>—</td><td>true</td></tr><tr><td>draggable</td><td>是否开启拖拽节点功能</td><td>Boolean</td><td>—</td><td>true</td></tr><tr><td>allow-drag</td><td>判断节点能否被拖拽 如果返回 false ，节点不能被拖动</td><td>Function(node)</td><td>—</td><td>—</td></tr><tr><td>allow-drop</td><td>拖拽时判定目标节点能否成为拖动目标位置。 返回false拖动节点不能被拖放到目标节点。type 参数有三种情况：&#39;prev&#39;、&#39;inner&#39;和 &#39;next&#39;，表示放置在目标节点前、插入目标节点和放置在目标节点后</td><td>Function(draggingNode, dropNode, type)</td><td>—</td><td>—</td></tr><tr><td>filter-node-method</td><td>筛选过滤树节点函数</td><td>Function</td><td>—</td><td>—</td></tr><tr><td>highlight-filter</td><td>高亮搜索条件文字</td><td>Boolean</td><td>—</td><td>true</td></tr><tr><td>timeout</td><td>刷新频率（<code>&lt;f-big-tree&gt;</code>扩展组件可用）</td><td>Number</td><td>—</td><td>17</td></tr><tr><td>itemHeight</td><td>节点高度 （<code>&lt;f-big-tree&gt;</code>扩展组件可用）</td><td>Number</td><td>—</td><td>28</td></tr><tr><td>visibleCount</td><td>显示区域个数（<code>&lt;f-big-tree&gt;</code>扩展组件可用）</td><td>Number</td><td>—</td><td>15</td></tr></tbody></table><h2 id="events" tabindex="-1">Events <a class="header-anchor" href="#events" aria-label="Permalink to &quot;Events&quot;">​</a></h2><table><thead><tr><th>事件名</th><th>说明</th><th>返回值</th></tr></thead><tbody><tr><td>select-change</td><td>点击树节点时触发</td><td>当前已选中的节点数组、当前项、flatState</td></tr><tr><td>check-change</td><td>点击复选框时触发</td><td>当前已勾选节点的数组、当前项、包含半选的节点数组、flatState</td></tr><tr><td>toggle-expand</td><td>展开和收起子列表时触发</td><td>当前节点的数据</td></tr><tr><td>node-drag-start</td><td>拖拽节点开始事件</td><td>被拖拽节点对应的 Node、event</td></tr><tr><td>node-drag-enter</td><td>拖拽节点进入事件</td><td>被拖拽节点对应的 Node、当前进入节点对应的 Node、event</td></tr><tr><td>node-drag-leave</td><td>拖拽节点移除事件</td><td>被拖拽节点对应的 Node、所离开节点对应的 Node、event</td></tr><tr><td>node-drag-over</td><td>拖拽节点 over 事件</td><td>被拖拽节点对应的 Node、当前进入节点对应的 Node、event</td></tr><tr><td>node-drag-end</td><td>拖拽节点结束事件</td><td>被拖拽节点对应的 Node、当前进入节点对应的 Node、放置节点类型 dropType、event</td></tr><tr><td>node-drag</td><td>拖拽节点结束事件</td><td>被拖拽节点对应的 Node、当前进入节点对应的 Node、放置节点类型 dropType、event</td></tr></tbody></table><h2 id="methods" tabindex="-1">Methods <a class="header-anchor" href="#methods" aria-label="Permalink to &quot;Methods&quot;">​</a></h2><table><thead><tr><th>事件名</th><th>说明</th><th>返回值</th></tr></thead><tbody><tr><td>getFlatState</td><td>拍平的数组 buffer，包含层级关系及索引 无</td><td></td></tr><tr><td>getCheckedNodes</td><td>获取被勾选的节点</td><td>无</td></tr><tr><td>getSelectedNodes</td><td>获取被选中的节点</td><td>无</td></tr><tr><td>getCheckedAndIndeterminateNodes</td><td>获取选中及半选节点</td><td>无</td></tr><tr><td>filter</td><td>树节点过滤函数，必须设置 filter-node-method 过滤匹配函数</td><td>无</td></tr><tr><td>setChecked</td><td>设置 node 勾选 ，参数为 keys：nodeKey 数组, flag：勾选状态，默认 true</td><td>无</td></tr><tr><td>setSelected</td><td>设置 node 单选 ，参数为 keys：nodeKey 数组, flag：勾选状态，默认 true，expandParent：是否展开祖先节点，默认 true</td><td>无</td></tr><tr><td>setExpand</td><td>设置 node 展开 ，参数为 keys：nodeKey 数组, flag：勾选状态，默认 true</td><td>无</td></tr><tr><td>expandAll</td><td>展开所有</td><td>无</td></tr><tr><td>collapseAll</td><td>收起所有</td><td>无</td></tr><tr><td>checkAll</td><td>勾选所有</td><td>无</td></tr><tr><td>unselectAll</td><td>取消所有单选</td><td>无</td></tr><tr><td>uncheckAll</td><td>取消全部勾选</td><td>无</td></tr></tbody></table><h2 id="children" tabindex="-1">Children <a class="header-anchor" href="#children" aria-label="Permalink to &quot;Children&quot;">​</a></h2><table><thead><tr><th>属性</th><th>说明</th><th>类型</th><th>默认值</th></tr></thead><tbody><tr><td>icon</td><td>节点显示 icon</td><td>String</td><td>—</td></tr><tr><td>title</td><td>节点显示标题</td><td>String</td><td>—</td></tr><tr><td>expand</td><td>是否展开直子节点</td><td>Boolean</td><td>false</td></tr><tr><td>disabled</td><td>禁用</td><td>Boolean</td><td>false</td></tr><tr><td>disableCheckbox</td><td>禁用单选框</td><td>Boolean</td><td>false</td></tr><tr><td>selected</td><td>是否选中子节点</td><td>Boolean</td><td>false</td></tr><tr><td>checked</td><td>是否勾选(如果勾选，子节点也会全部勾选)</td><td>Boolean</td><td>false</td></tr><tr><td>visible</td><td>是否显示节点(可通过操作节点 visible 属性隐藏节点)</td><td>Boolean</td><td>false</td></tr><tr><td>children</td><td>子节点属性数组，可以设置 tree 组件 children-key 属性来自定义</td><td>Array</td><td>—</td></tr><tr><td>loading</td><td>可设置为异步加载节点，需配合 loadData 设置加载函数</td><td>Boolean</td><td>—</td></tr><tr><td>isLeaf</td><td>是否为叶子节点，可控制是否显示箭头，可配合异步加载实现</td><td>Boolean</td><td>—</td></tr></tbody></table></div></div></div><footer class="page-edit"><div class="last-updated"><span class="prefix">最后更新: </span><span class="time">2024-01-27 01:26:11</span></div></footer><div class="page-nav"><p class="inner"><!----><span class="next"><a href="/guide/introduction"><span>introduction</span><i class="bx bx-chevron-right"></i></a></span></p></div><!--[--><!--]--><div class="up"><i class="bx bx-chevron-up"></i></div><footer class="footer" data-v-36e8006f><div class="footer__uls" data-v-36e8006f><!--[--><ul data-v-36e8006f><li class="title" data-v-36e8006f>FEI-UI-DESIGN</li><!--[--><li data-v-36e8006f><a target="_blank" href="/guide/introduction" data-v-36e8006f>介绍</a></li><li data-v-36e8006f><a target="_blank" href="/guide/installation" data-v-36e8006f>快速上手</a></li><li data-v-36e8006f><a target="_blank" href="/guide/jsx" data-v-36e8006f>指南</a></li><!--]--></ul><ul data-v-36e8006f><li class="title" data-v-36e8006f>资源</li><!--[--><li data-v-36e8006f><a target="_blank" href="/guide/introduction" data-v-36e8006f>文档</a></li><li data-v-36e8006f><a target="_blank" href="/components/button" data-v-36e8006f>组件</a></li><!--]--></ul><ul data-v-36e8006f><li class="title" data-v-36e8006f>帮助</li><!--[--><li data-v-36e8006f><a target="_blank" href="https://github.com/ymf-930/fei-ui-design/issues" data-v-36e8006f>Github Issues</a></li><li data-v-36e8006f><a target="_blank" href="https://gitee.com/ymf930/fei-ui-design/issues" data-v-36e8006f>Gitee Issues</a></li><!--]--></ul><ul data-v-36e8006f><li class="title" data-v-36e8006f>社区</li><!--[--><li data-v-36e8006f><a target="_blank" href="https://github.com/ymf-930/fei-ui-design/" data-v-36e8006f>Github</a></li><li data-v-36e8006f><a target="_blank" href="https://gitee.com/ymf930/fei-ui-design" data-v-36e8006f>Gitee</a></li><!--]--></ul><!--]--></div><div class="copy" data-v-36e8006f><span class="span-copy" data-v-36e8006f> Copyright © 2023 FEI-UI-DESIGN </span><span class="span-lusaxweb" data-v-36e8006f><span data-v-36e8006f> Created By </span><a target="_blank" href="http://lusaxweb.net" data-v-36e8006f>后来@</a></span></div></footer></main><aside class="sidebar" data-v-818e4420><svg class="effect1" xmlns="http://www.w3.org/2000/svg" width="160" height="160" viewBox="0 0 160 160"><path id="Trazado_200" data-name="Trazado 200" d="M0-10,150,0l10,150S137.643,80.734,100.143,43.234,0-10,0-10Z" transform="translate(0 10)"></path></svg><div class="content-sidebar"><!--[--><!--]--><ul class="sidebar-links"><!--[--><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>通用组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/components/icon" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-fire" style=""></i> 图标 <span>(Icon)</span></a></li><li class=""><a href="/fei-ui-design/components/button" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-Youtube" style=""></i> 按钮 <span>(Button)</span></a></li><li class=""><a href="/fei-ui-design/components/card" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-creditcard" style=""></i> 卡片 <span>(Card)</span></a></li><li class=""><a href="/fei-ui-design/components/collapse" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-interation" style=""></i> 折叠面板 <span>(Collapse)</span></a></li><li class=""><a href="/fei-ui-design/components/divider" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-line" style=""></i> 分割线 <span>(Divider)</span></a></li><li class=""><a href="/fei-ui-design/components/dropdown" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-caret-down" style=""></i> 下拉菜单 <span>(Dropdown)</span></a></li><li class=""><a href="/fei-ui-design/components/tag" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-tags" style=""></i> 标签 <span>(Tag)</span></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>布局组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/components/layout" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-layout" style=""></i> 布局 <span>(Layout)</span></a></li><li class=""><a href="/fei-ui-design/components/grid" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-appstore" style=""></i> 栅格 <span>(Grid)</span></a></li><li class=""><a href="/fei-ui-design/components/space" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-swap" style=""></i> 间距 <span>(Space)</span></a></li><li class=""><a href="/fei-ui-design/components/split" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-block" style=""></i> 分割面板 <span>(Split)</span></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>数据录入组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/components/input" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-edit-square" style=""></i> 输入框 <span>(Input)</span></a></li><li class=""><a href="/fei-ui-design/components/input-number" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-shake" style=""></i> 数字输入 <span>(InputNumber)</span></a></li><li class=""><a href="/fei-ui-design/components/radio" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-plus-circle" style=""></i> 单选框 <span>(Radio)</span></a></li><li class=""><a href="/fei-ui-design/components/checkbox" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-check-square" style=""></i> 多选框 <span>(Checkbox)</span></a></li><li class=""><a href="/fei-ui-design/components/switch" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-build" style=""></i> 开关 <span>(Switch)</span></a></li><li class=""><a href="/fei-ui-design/components/select" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-unorderedlist" style=""></i> 选择器 <span>(Select)</span></a></li><li class=""><a href="/fei-ui-design/components/cascader" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-pic-left" style=""></i> 级联选择 <span>(Cascader)</span></a></li><li class=""><a href="/fei-ui-design/components/date-picker" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-calendar" style=""></i> 日期选择器 <span>(DatePicker)</span></a></li><li class=""><a href="/fei-ui-design/components/time-picker" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-time-circle" style=""></i> 时间选择器 <span>(TimePicker)</span></a></li><li class=""><a href="/fei-ui-design/components/color-picker" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-bg-colors" style=""></i> 颜色选择器 <span>(ColorPicker)</span></a></li><li class=""><a href="/fei-ui-design/components/rate" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-star" style=""></i> 评分 <span>(Rate)</span></a></li><li class=""><a href="/fei-ui-design/components/slider" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-minus" style=""></i> 滑块 <span>(Slider)</span></a></li><li class=""><a href="/fei-ui-design/components/upload" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-cloud-upload" style=""></i> 上传 <span>(Upload)</span></a></li><li class=""><a href="/fei-ui-design/components/form" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-reconciliation" style=""></i> 表单 <span>(Form)</span></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>数据展示组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class="active"><a href="/fei-ui-design/components/tree" title class="sidebar-link active"><i class="fei-icon f-iconfont f-icon-branches" style=""></i> 树结构 <span>(Tree)</span></a></li><li class=""><a href="/fei-ui-design/components/table" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-table" style=""></i> 表格 <span>(Table)</span></a></li><li class=""><a href="/fei-ui-design/components/page" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-read" style=""></i> 分页 <span>(Page)</span></a></li><li class=""><a href="/fei-ui-design/components/desc" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-unorderedlist" style=""></i> 描述 <span>(Desc)</span></a></li><li class=""><a href="/fei-ui-design/components/timeline" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-arrowdown" style=""></i> 时间线 <span>(Timeline)</span></a></li><li class=""><a href="/fei-ui-design/components/calendar" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-calendar-fill" style=""></i> 日历 <span>(Calendar)</span></a></li><li class=""><a href="/fei-ui-design/components/carousel" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-appstore-fill" style=""></i> 轮播 <span>(Carousel)</span></a></li><li class=""><a href="/fei-ui-design/components/count-to" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-orderedlist" style=""></i> 数字动画 <span>(CountTo)</span></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>导航组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/components/affix" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-pushpin" style=""></i> 图钉 <span>(Affix)</span></a></li><li class=""><a href="/fei-ui-design/components/anchor" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-attachment" style=""></i> 锚点 <span>(Anchor)</span></a></li><li class=""><a href="/fei-ui-design/components/back-top" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-up" style=""></i> 返回顶部 <span>(BackTop)</span></a></li><li class=""><a href="/fei-ui-design/components/breadcrumb" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-right" style=""></i> 面包屑 <span>(Breadcrumb)</span></a></li><li class=""><a href="/fei-ui-design/components/loading-bar" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-minus" style=""></i> 加载条 <span>(Loading Bar)</span></a></li><li class=""><a href="/fei-ui-design/components/menu" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-menu" style=""></i> 菜单 <span>(Menu)</span></a></li><li class=""><a href="/fei-ui-design/components/tabs" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-project" style=""></i> 标签页 <span>(Tabs)</span></a></li><li class=""><a href="/fei-ui-design/components/steps" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-arrowright" style=""></i> 步骤 <span>(Steps)</span></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>反馈组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/components/alert" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-error-fill" style=""></i> 警告信息 <span>(Alert)</span></a></li><li class=""><a href="/fei-ui-design/components/badge" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-border" style=""></i> 标记 <span>(Badge)</span></a></li><li class=""><a href="/fei-ui-design/components/modal" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-idcard" style=""></i> 模态框 <span>(Modal)</span></a></li><li class=""><a href="/fei-ui-design/components/message" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-message" style=""></i> 消息提示 <span>(Message)</span></a></li><li class=""><a href="/fei-ui-design/components/message-box" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-mail" style=""></i> 弹框提示 <span>(MessageBox)</span></a></li><li class=""><a href="/fei-ui-design/components/notice" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-notification" style=""></i> 通知 <span>(Notice)</span></a></li><li class=""><a href="/fei-ui-design/components/tooltip" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-info-circle" style=""></i> 弹出提示 <span>(Tooltip)</span></a></li><li class=""><a href="/fei-ui-design/components/popover" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-question-circle" style=""></i> 弹出信息 <span>(Popover)</span></a></li><li class=""><a href="/fei-ui-design/components/drawer" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-build" style=""></i> 抽屉 <span>(Drawer)</span></a></li><li class=""><a href="/fei-ui-design/components/skeleton" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-sever-fill" style=""></i> 骨架屏 <span>(Skeleton)</span></a></li><li class=""><a href="/fei-ui-design/components/loading" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-loading" style=""></i> 加载 <span>(Loading)</span></a></li><li class=""><a href="/fei-ui-design/components/progress" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-hourglass" style=""></i> 进度条 <span>(Progress)</span></a></li><li class=""><a href="/fei-ui-design/components/circle" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-redo" style=""></i> 进度环 <span>(Circle)</span></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>内置组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/fei-ui-design/components/empty" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-border" style=""></i> 空状态 <span>(Empty)</span></a></li><li class=""><a href="/fei-ui-design/components/scrollbar" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-container" style=""></i> 滚动组件 <span>(Scrollbar)</span></a></li><li class=""><a href="/fei-ui-design/components/popper" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-pic-center" style=""></i> 弹层 <span>(Popper)</span></a></li><!--]--></ul></section></li><li class=""><section class="sidebar-group collapsable depth-0"><p class="open sidebar-heading"><span>配置组件</span><i class="bx bx-chevron-right"></i></p><ul class="sidebar-links sidebar-group-items"><!--[--><li class=""><a href="/components/config-provider" title class="sidebar-link"><i class="fei-icon f-iconfont f-icon-setting" style=""></i> 全局配置 <span>(ConfigProvider)</span></a></li><!--]--></ul></section></li><!--]--></ul><!--[--><!--]--></div></aside><!----></div></div>
    <script>window.__VP_HASH_MAP__=JSON.parse("{\"components_breadcrumb.md\":\"Bg1uZ2l2\",\"components_card.md\":\"5vBOail9\",\"components_back-top.md\":\"NOXjEB41\",\"components_desc.md\":\"NNy8sdZB\",\"components_affix.md\":\"q2WWgWAm\",\"components_alert.md\":\"EzvdKauv\",\"components_empty.md\":\"Iqk9Sbur\",\"components_notice.md\":\"_NAs6-A7\",\"components_calendar.md\":\"JigwWurO\",\"components_message-box.md\":\"fCCAsymk\",\"components_rate.md\":\"9KkdoNnr\",\"components_loading-bar.md\":\"tkY5C0GZ\",\"components_divider.md\":\"IS1ZOnvq\",\"components_collapse.md\":\"0u5rpv51\",\"components_layout.md\":\"ODBV3zhY\",\"components_drawer.md\":\"CrRyiXyC\",\"components_anchor.md\":\"s14wXJS8\",\"components_scrollbar.md\":\"6vQ32Hdn\",\"components_popover.md\":\"wYQmpkgs\",\"components_message.md\":\"NO65C7hX\",\"components_circle.md\":\"ryx4IdBG\",\"components_popper.md\":\"5Fyiy38Q\",\"components_badge.md\":\"oO7JxteH\",\"components_page.md\":\"kNgnJY-a\",\"components_count-to.md\":\"eHOBDHvp\",\"guide_custom-theme.md\":\"n1FWcWco\",\"guide_common-directive.md\":\"nT9B4UFj\",\"components_slider.md\":\"DI2RI7Rr\",\"components_progress.md\":\"eFjRj96_\",\"components_checkbox.md\":\"7F5dha0P\",\"guide_changelog.md\":\"0yWmpxcB\",\"guide_jsx.md\":\"8hwr5r-5\",\"components_split.md\":\"wUEP-Ht5\",\"components_icon.md\":\"dZIqeyJA\",\"guide_common-transition.md\":\"MscjPGVR\",\"guide_installation.md\":\"j6S0f9nJ\",\"components_switch.md\":\"vcak84L_\",\"components_config-provider.md\":\"nBaHjQiX\",\"components_carousel.md\":\"NtUqJ85A\",\"components_select.md\":\"0rxZmlt4\",\"index.md\":\"soxSuBHK\",\"guide_introduction.md\":\"2mVny5Oj\",\"components_upload.md\":\"U3QoNCTf\",\"guide_usage-sfc.md\":\"rW-UMWov\",\"components_dropdown.md\":\"51EVo7GJ\",\"components_button.md\":\"rxuz04JE\",\"components_modal.md\":\"4bWdPtB_\",\"components_skeleton.md\":\"v-GES9KU\",\"guide_color-design.md\":\"cVmivjOg\",\"guide_import-on-demand.md\":\"t0iAz-CI\",\"components_loading.md\":\"DGAeDdDQ\",\"components_input-number.md\":\"2tw-2fEx\",\"components_timeline.md\":\"Py8dhkSr\",\"components_space.md\":\"qly7dGS4\",\"components_steps.md\":\"Nje8YnTW\",\"components_time-picker.md\":\"zWM_dqXm\",\"components_radio.md\":\"Nt3d-szh\",\"components_grid.md\":\"h2dg77Kz\",\"components_color-picker.md\":\"vP55BNVo\",\"components_tooltip.md\":\"y5xaDDhE\",\"components_menu.md\":\"7c_ihj_r\",\"components_tag.md\":\"U2sf24zV\",\"components_input.md\":\"dJc4_w-S\",\"components_tabs.md\":\"aWS6wiSt\",\"components_date-picker.md\":\"9ogHh5Jw\",\"guide_common-css.md\":\"uhWWbi3e\",\"components_cascader.md\":\"Qiv-ax3R\",\"components_form.md\":\"oq_ykolk\",\"guide_common-api.md\":\"ctudm0v6\",\"components_tree.md\":\"LtXYhey_\",\"components_table.md\":\"ZqShECt8\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"zh-CN\",\"dir\":\"ltr\",\"title\":\"FEI-UI-DESIGN\",\"description\":\"A VitePress site\",\"base\":\"/fei-ui-design/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"socialLinks\":[{\"icon\":\"github\",\"link\":\"https://github.com/gumingWu/vitepress-fun\"}],\"repo\":\"ymf-930/fei-ui-design\",\"docsDir\":\"/docs\",\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"文档\",\"link\":\"/fei-ui-design/guide/introduction\"},{\"text\":\"组件\",\"link\":\"/fei-ui-design/components/button\"}],\"locales\":{\"/\":{\"nav\":[{\"text\":\"Home\",\"link\":\"/fei-ui-design/\"},{\"text\":\"Document\",\"link\":\"/fei-ui-design//guide/\",\"items\":[{\"text\":\"Introduction\",\"link\":\"/fei-ui-design//guide/\"},{\"text\":\"Getting Started\",\"link\":\"/fei-ui-design//guide/gettingStarted\"}]},{\"text\":\"Components\",\"link\":\"/fei-ui-design//components\",\"items\":[{\"text\":\"Components\",\"items\":[{\"text\":\"Button\",\"link\":\"/fei-ui-design//components/\"},{\"text\":\"Alert\",\"link\":\"/fei-ui-design//components/Alert\"},{\"text\":\"Loading\",\"link\":\"/fei-ui-design//components/Loading\"},{\"text\":\"Input\",\"link\":\"/fei-ui-design//components/Input\"},{\"text\":\"Checkbox\",\"link\":\"/fei-ui-design//components/Checkbox\"},{\"text\":\"Switch\",\"link\":\"/fei-ui-design//components/Switch\"},{\"text\":\"Select\",\"link\":\"/fei-ui-design//components/Select\"},{\"text\":\"Avatar\",\"link\":\"/fei-ui-design//components/Avatar\"},{\"text\":\"Notification\",\"link\":\"/fei-ui-design//components/Notification\"},{\"text\":\"Radio\",\"link\":\"/fei-ui-design//components/Radio\"},{\"text\":\"Tooltip\",\"link\":\"/fei-ui-design//components/Tooltip\"},{\"text\":\"Dialog\",\"link\":\"/fei-ui-design//components/Dialog\"},{\"text\":\"Pagination\",\"link\":\"/fei-ui-design//components/Pagination\"},{\"text\":\"Table\",\"link\":\"/fei-ui-design//components/Table\"},{\"text\":\"Navbar\",\"link\":\"/fei-ui-design//components/Navbar\"},{\"text\":\"Sidebar\",\"link\":\"/fei-ui-design//components/Sidebar\"},{\"text\":\"Card\",\"link\":\"/fei-ui-design//components/Card\"}]}]}],\"sidebar\":{\"/\":[{\"title\":\"介绍\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"Fei UI Design\",\"link\":\"/fei-ui-design/guide/introduction\"},{\"title\":\"变更日志\",\"link\":\"/fei-ui-design/guide/changelog\"}]},{\"title\":\"快速上手\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"安装\",\"link\":\"/fei-ui-design/guide/installation\"},{\"title\":\"在 SFC 中使用\",\"link\":\"/fei-ui-design/guide/usage-sfc\"},{\"title\":\"按需引入\",\"link\":\"/fei-ui-design/guide/import-on-demand\"}]},{\"title\":\"指南\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"JSX & TSX\",\"link\":\"/fei-ui-design/guide/jsx\"},{\"title\":\"色彩设计\",\"link\":\"/fei-ui-design/guide/color-design\"},{\"title\":\"调整主题\",\"link\":\"/fei-ui-design/guide/custom-theme\"},{\"title\":\"通用样式\",\"link\":\"/fei-ui-design/guide/common-css\"},{\"title\":\"帮助函数\",\"link\":\"/fei-ui-design/guide/common-api\"},{\"title\":\"组件指令\",\"link\":\"/fei-ui-design/guide/common-directive\"},{\"title\":\"内置动画\",\"link\":\"/fei-ui-design/guide/common-transition\"}]},{\"title\":\"通用组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图标\",\"link\":\"/fei-ui-design/components/icon\",\"icon\":\"fire\",\"alias\":\"Icon\"},{\"title\":\"按钮\",\"link\":\"/fei-ui-design/components/button\",\"icon\":\"Youtube\",\"alias\":\"Button\"},{\"title\":\"卡片\",\"link\":\"/fei-ui-design/components/card\",\"icon\":\"creditcard\",\"alias\":\"Card\"},{\"title\":\"折叠面板\",\"link\":\"/fei-ui-design/components/collapse\",\"icon\":\"interation\",\"alias\":\"Collapse\"},{\"title\":\"分割线\",\"link\":\"/fei-ui-design/components/divider\",\"icon\":\"line\",\"alias\":\"Divider\"},{\"title\":\"下拉菜单\",\"link\":\"/fei-ui-design/components/dropdown\",\"icon\":\"caret-down\",\"alias\":\"Dropdown\"},{\"title\":\"标签\",\"link\":\"/fei-ui-design/components/tag\",\"icon\":\"tags\",\"alias\":\"Tag\"}]},{\"title\":\"布局组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"布局\",\"link\":\"/fei-ui-design/components/layout\",\"icon\":\"layout\",\"alias\":\"Layout\"},{\"title\":\"栅格\",\"link\":\"/fei-ui-design/components/grid\",\"icon\":\"appstore\",\"alias\":\"Grid\"},{\"title\":\"间距\",\"link\":\"/fei-ui-design/components/space\",\"icon\":\"swap\",\"alias\":\"Space\"},{\"title\":\"分割面板\",\"link\":\"/fei-ui-design/components/split\",\"icon\":\"block\",\"alias\":\"Split\"}]},{\"title\":\"数据录入组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"输入框\",\"link\":\"/fei-ui-design/components/input\",\"icon\":\"edit-square\",\"alias\":\"Input\"},{\"title\":\"数字输入\",\"link\":\"/fei-ui-design/components/input-number\",\"icon\":\"shake\",\"alias\":\"InputNumber\"},{\"title\":\"单选框\",\"link\":\"/fei-ui-design/components/radio\",\"icon\":\"plus-circle\",\"alias\":\"Radio\"},{\"title\":\"多选框\",\"link\":\"/fei-ui-design/components/checkbox\",\"icon\":\"check-square\",\"alias\":\"Checkbox\"},{\"title\":\"开关\",\"link\":\"/fei-ui-design/components/switch\",\"icon\":\"build\",\"alias\":\"Switch\"},{\"title\":\"选择器\",\"link\":\"/fei-ui-design/components/select\",\"icon\":\"unorderedlist\",\"alias\":\"Select\"},{\"title\":\"级联选择\",\"link\":\"/fei-ui-design/components/cascader\",\"icon\":\"pic-left\",\"alias\":\"Cascader\"},{\"title\":\"日期选择器\",\"link\":\"/fei-ui-design/components/date-picker\",\"icon\":\"calendar\",\"alias\":\"DatePicker\"},{\"title\":\"时间选择器\",\"link\":\"/fei-ui-design/components/time-picker\",\"icon\":\"time-circle\",\"alias\":\"TimePicker\"},{\"title\":\"颜色选择器\",\"link\":\"/fei-ui-design/components/color-picker\",\"icon\":\"bg-colors\",\"alias\":\"ColorPicker\"},{\"title\":\"评分\",\"link\":\"/fei-ui-design/components/rate\",\"icon\":\"star\",\"alias\":\"Rate\"},{\"title\":\"滑块\",\"link\":\"/fei-ui-design/components/slider\",\"icon\":\"minus\",\"alias\":\"Slider\"},{\"title\":\"上传\",\"link\":\"/fei-ui-design/components/upload\",\"icon\":\"cloud-upload\",\"alias\":\"Upload\"},{\"title\":\"表单\",\"link\":\"/fei-ui-design/components/form\",\"icon\":\"reconciliation\",\"alias\":\"Form\"}]},{\"title\":\"数据展示组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"树结构\",\"link\":\"/fei-ui-design/components/tree\",\"icon\":\"branches\",\"alias\":\"Tree\"},{\"title\":\"表格\",\"link\":\"/fei-ui-design/components/table\",\"icon\":\"table\",\"alias\":\"Table\"},{\"title\":\"分页\",\"link\":\"/fei-ui-design/components/page\",\"icon\":\"read\",\"alias\":\"Page\"},{\"title\":\"描述\",\"link\":\"/fei-ui-design/components/desc\",\"icon\":\"unorderedlist\",\"alias\":\"Desc\"},{\"title\":\"时间线\",\"link\":\"/fei-ui-design/components/timeline\",\"icon\":\"arrowdown\",\"alias\":\"Timeline\"},{\"title\":\"日历\",\"link\":\"/fei-ui-design/components/calendar\",\"icon\":\"calendar-fill\",\"alias\":\"Calendar\"},{\"title\":\"轮播\",\"link\":\"/fei-ui-design/components/carousel\",\"icon\":\"appstore-fill\",\"alias\":\"Carousel\"},{\"title\":\"数字动画\",\"link\":\"/fei-ui-design/components/count-to\",\"icon\":\"orderedlist\",\"alias\":\"CountTo\"}]},{\"title\":\"导航组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图钉\",\"link\":\"/fei-ui-design/components/affix\",\"icon\":\"pushpin\",\"alias\":\"Affix\"},{\"title\":\"锚点\",\"link\":\"/fei-ui-design/components/anchor\",\"icon\":\"attachment\",\"alias\":\"Anchor\"},{\"title\":\"返回顶部\",\"link\":\"/fei-ui-design/components/back-top\",\"icon\":\"up\",\"alias\":\"BackTop\"},{\"title\":\"面包屑\",\"link\":\"/fei-ui-design/components/breadcrumb\",\"icon\":\"right\",\"alias\":\"Breadcrumb\"},{\"title\":\"加载条\",\"link\":\"/fei-ui-design/components/loading-bar\",\"icon\":\"minus\",\"alias\":\"Loading Bar\"},{\"title\":\"菜单\",\"link\":\"/fei-ui-design/components/menu\",\"icon\":\"menu\",\"alias\":\"Menu\"},{\"title\":\"标签页\",\"link\":\"/fei-ui-design/components/tabs\",\"icon\":\"project\",\"alias\":\"Tabs\"},{\"title\":\"步骤\",\"link\":\"/fei-ui-design/components/steps\",\"icon\":\"arrowright\",\"alias\":\"Steps\"}]},{\"title\":\"反馈组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"警告信息\",\"link\":\"/fei-ui-design/components/alert\",\"icon\":\"error-fill\",\"alias\":\"Alert\"},{\"title\":\"标记\",\"link\":\"/fei-ui-design/components/badge\",\"icon\":\"border\",\"alias\":\"Badge\"},{\"title\":\"模态框\",\"link\":\"/fei-ui-design/components/modal\",\"icon\":\"idcard\",\"alias\":\"Modal\"},{\"title\":\"消息提示\",\"link\":\"/fei-ui-design/components/message\",\"icon\":\"message\",\"alias\":\"Message\"},{\"title\":\"弹框提示\",\"link\":\"/fei-ui-design/components/message-box\",\"icon\":\"mail\",\"alias\":\"MessageBox\"},{\"title\":\"通知\",\"link\":\"/fei-ui-design/components/notice\",\"icon\":\"notification\",\"alias\":\"Notice\"},{\"title\":\"弹出提示\",\"link\":\"/fei-ui-design/components/tooltip\",\"icon\":\"info-circle\",\"alias\":\"Tooltip\"},{\"title\":\"弹出信息\",\"link\":\"/fei-ui-design/components/popover\",\"icon\":\"question-circle\",\"alias\":\"Popover\"},{\"title\":\"抽屉\",\"link\":\"/fei-ui-design/components/drawer\",\"icon\":\"build\",\"alias\":\"Drawer\"},{\"title\":\"骨架屏\",\"link\":\"/fei-ui-design/components/skeleton\",\"icon\":\"sever-fill\",\"alias\":\"Skeleton\"},{\"title\":\"加载\",\"link\":\"/fei-ui-design/components/loading\",\"icon\":\"loading\",\"alias\":\"Loading\"},{\"title\":\"进度条\",\"link\":\"/fei-ui-design/components/progress\",\"icon\":\"hourglass\",\"alias\":\"Progress\"},{\"title\":\"进度环\",\"link\":\"/fei-ui-design/components/circle\",\"icon\":\"redo\",\"alias\":\"Circle\"}]},{\"title\":\"内置组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"空状态\",\"link\":\"/fei-ui-design/components/empty\",\"icon\":\"border\",\"alias\":\"Empty\"},{\"title\":\"滚动组件\",\"link\":\"/fei-ui-design/components/scrollbar\",\"icon\":\"container\",\"alias\":\"Scrollbar\"},{\"title\":\"弹层\",\"link\":\"/fei-ui-design/components/popper\",\"icon\":\"pic-center\",\"alias\":\"Popper\"}]},{\"title\":\"配置组件\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"全局配置\",\"link\":\"/components/config-provider\",\"icon\":\"setting\",\"alias\":\"ConfigProvider\"}]}]}},\"/es/\":{\"nav\":[{\"text\":\"首页\",\"link\":\"/fei-ui-design/\"},{\"text\":\"文档\",\"link\":\"/fei-ui-design//guide/\",\"items\":[{\"text\":\"介绍\",\"link\":\"/fei-ui-design//guide/\"},{\"text\":\"快速开始\",\"link\":\"/fei-ui-design//guide/gettingStarted\"}]},{\"text\":\"组件\",\"link\":\"/fei-ui-design//components\",\"items\":[{\"text\":\"组件\",\"items\":[{\"text\":\"Button\",\"link\":\"/fei-ui-design//components/\"},{\"text\":\"Alert\",\"link\":\"/fei-ui-design//components/Alert\"},{\"text\":\"Loading\",\"link\":\"/fei-ui-design//components/Loading\"},{\"text\":\"Input\",\"link\":\"/fei-ui-design//components/Input\"},{\"text\":\"Checkbox\",\"link\":\"/fei-ui-design//components/Checkbox\"},{\"text\":\"Switch\",\"link\":\"/fei-ui-design//components/Switch\"},{\"text\":\"Select\",\"link\":\"/fei-ui-design//components/Select\"},{\"text\":\"Avatar\",\"link\":\"/fei-ui-design//components/Avatar\"},{\"text\":\"Notification\",\"link\":\"/fei-ui-design//components/Notification\"},{\"text\":\"Radio\",\"link\":\"/fei-ui-design//components/Radio\"},{\"text\":\"Tooltip\",\"link\":\"/fei-ui-design//components/Tooltip\"},{\"text\":\"Dialog\",\"link\":\"/fei-ui-design//components/Dialog\"},{\"text\":\"Pagination\",\"link\":\"/fei-ui-design//components/Pagination\"},{\"text\":\"Table\",\"link\":\"/fei-ui-design//components/Table\"},{\"text\":\"Navbar\",\"link\":\"/fei-ui-design//components/Navbar\"},{\"text\":\"Sidebar\",\"link\":\"/fei-ui-design//components/Sidebar\"},{\"text\":\"Card\",\"link\":\"/fei-ui-design//components/Card\"}]}]}],\"sidebar\":{\"/es/\":[{\"title\":\"Introduce\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"Fei UI Design\",\"link\":\"/fei-ui-design/guide/introduction\"},{\"title\":\"变更日志\",\"link\":\"/fei-ui-design/guide/changelog\"}]},{\"title\":\"Get Started\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"安装\",\"link\":\"/fei-ui-design/guide/installation\"},{\"title\":\"在 SFC 中使用\",\"link\":\"/fei-ui-design/guide/usage-sfc\"},{\"title\":\"按需引入\",\"link\":\"/fei-ui-design/guide/import-on-demand\"}]},{\"title\":\"Guide\",\"collapsable\":false,\"navType\":\"guide\",\"children\":[{\"title\":\"JSX & TSX\",\"link\":\"/fei-ui-design/guide/jsx\"},{\"title\":\"色彩设计\",\"link\":\"/fei-ui-design/guide/color-design\"},{\"title\":\"调整主题\",\"link\":\"/fei-ui-design/guide/custom-theme\"},{\"title\":\"通用样式\",\"link\":\"/fei-ui-design/guide/common-css\"},{\"title\":\"帮助函数\",\"link\":\"/fei-ui-design/guide/common-api\"},{\"title\":\"组件指令\",\"link\":\"/fei-ui-design/guide/common-directive\"},{\"title\":\"内置动画\",\"link\":\"/fei-ui-design/guide/common-transition\"}]},{\"title\":\"Common Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图标\",\"link\":\"/fei-ui-design/components/icon\",\"icon\":\"fire\",\"alias\":\"Icon\"},{\"title\":\"按钮\",\"link\":\"/fei-ui-design/components/button\",\"icon\":\"Youtube\",\"alias\":\"Button\"},{\"title\":\"卡片\",\"link\":\"/fei-ui-design/components/card\",\"icon\":\"creditcard\",\"alias\":\"Card\"},{\"title\":\"折叠面板\",\"link\":\"/fei-ui-design/components/collapse\",\"icon\":\"interation\",\"alias\":\"Collapse\"},{\"title\":\"分割线\",\"link\":\"/fei-ui-design/components/divider\",\"icon\":\"line\",\"alias\":\"Divider\"},{\"title\":\"下拉菜单\",\"link\":\"/fei-ui-design/components/dropdown\",\"icon\":\"caret-down\",\"alias\":\"Dropdown\"},{\"title\":\"标签\",\"link\":\"/fei-ui-design/components/tag\",\"icon\":\"tags\",\"alias\":\"Tag\"}]},{\"title\":\"Layout Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"布局\",\"link\":\"/fei-ui-design/components/layout\",\"icon\":\"layout\",\"alias\":\"Layout\"},{\"title\":\"栅格\",\"link\":\"/fei-ui-design/components/grid\",\"icon\":\"appstore\",\"alias\":\"Grid\"},{\"title\":\"间距\",\"link\":\"/fei-ui-design/components/space\",\"icon\":\"swap\",\"alias\":\"Space\"},{\"title\":\"分割面板\",\"link\":\"/fei-ui-design/components/split\",\"icon\":\"block\",\"alias\":\"Split\"}]},{\"title\":\"Data entry component\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"输入框\",\"link\":\"/fei-ui-design/components/input\",\"icon\":\"edit-square\",\"alias\":\"Input\"},{\"title\":\"数字输入\",\"link\":\"/fei-ui-design/components/input-number\",\"icon\":\"shake\",\"alias\":\"InputNumber\"},{\"title\":\"单选框\",\"link\":\"/fei-ui-design/components/radio\",\"icon\":\"plus-circle\",\"alias\":\"Radio\"},{\"title\":\"多选框\",\"link\":\"/fei-ui-design/components/checkbox\",\"icon\":\"check-square\",\"alias\":\"Checkbox\"},{\"title\":\"开关\",\"link\":\"/fei-ui-design/components/switch\",\"icon\":\"build\",\"alias\":\"Switch\"},{\"title\":\"选择器\",\"link\":\"/fei-ui-design/components/select\",\"icon\":\"unorderedlist\",\"alias\":\"Select\"},{\"title\":\"级联选择\",\"link\":\"/fei-ui-design/components/cascader\",\"icon\":\"pic-left\",\"alias\":\"Cascader\"},{\"title\":\"日期选择器\",\"link\":\"/fei-ui-design/components/date-picker\",\"icon\":\"calendar\",\"alias\":\"DatePicker\"},{\"title\":\"时间选择器\",\"link\":\"/fei-ui-design/components/time-picker\",\"icon\":\"time-circle\",\"alias\":\"TimePicker\"},{\"title\":\"颜色选择器\",\"link\":\"/fei-ui-design/components/color-picker\",\"icon\":\"bg-colors\",\"alias\":\"ColorPicker\"},{\"title\":\"评分\",\"link\":\"/fei-ui-design/components/rate\",\"icon\":\"star\",\"alias\":\"Rate\"},{\"title\":\"滑块\",\"link\":\"/fei-ui-design/components/slider\",\"icon\":\"minus\",\"alias\":\"Slider\"},{\"title\":\"上传\",\"link\":\"/fei-ui-design/components/upload\",\"icon\":\"cloud-upload\",\"alias\":\"Upload\"},{\"title\":\"表单\",\"link\":\"/fei-ui-design/components/form\",\"icon\":\"reconciliation\",\"alias\":\"Form\"}]},{\"title\":\"Data display Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"树结构\",\"link\":\"/fei-ui-design/components/tree\",\"icon\":\"branches\",\"alias\":\"Tree\"},{\"title\":\"表格\",\"link\":\"/fei-ui-design/components/table\",\"icon\":\"table\",\"alias\":\"Table\"},{\"title\":\"分页\",\"link\":\"/fei-ui-design/components/page\",\"icon\":\"read\",\"alias\":\"Page\"},{\"title\":\"描述\",\"link\":\"/fei-ui-design/components/desc\",\"icon\":\"unorderedlist\",\"alias\":\"Desc\"},{\"title\":\"时间线\",\"link\":\"/fei-ui-design/components/timeline\",\"icon\":\"arrowdown\",\"alias\":\"Timeline\"},{\"title\":\"日历\",\"link\":\"/fei-ui-design/components/calendar\",\"icon\":\"calendar-fill\",\"alias\":\"Calendar\"},{\"title\":\"轮播\",\"link\":\"/fei-ui-design/components/carousel\",\"icon\":\"appstore-fill\",\"alias\":\"Carousel\"},{\"title\":\"数字动画\",\"link\":\"/fei-ui-design/components/count-to\",\"icon\":\"orderedlist\",\"alias\":\"CountTo\"}]},{\"title\":\"Navigation Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"图钉\",\"link\":\"/fei-ui-design/components/affix\",\"icon\":\"pushpin\",\"alias\":\"Affix\"},{\"title\":\"锚点\",\"link\":\"/fei-ui-design/components/anchor\",\"icon\":\"attachment\",\"alias\":\"Anchor\"},{\"title\":\"返回顶部\",\"link\":\"/fei-ui-design/components/back-top\",\"icon\":\"up\",\"alias\":\"BackTop\"},{\"title\":\"面包屑\",\"link\":\"/fei-ui-design/components/breadcrumb\",\"icon\":\"right\",\"alias\":\"Breadcrumb\"},{\"title\":\"加载条\",\"link\":\"/fei-ui-design/components/loading-bar\",\"icon\":\"minus\",\"alias\":\"Loading Bar\"},{\"title\":\"菜单\",\"link\":\"/fei-ui-design/components/menu\",\"icon\":\"menu\",\"alias\":\"Menu\"},{\"title\":\"标签页\",\"link\":\"/fei-ui-design/components/tabs\",\"icon\":\"project\",\"alias\":\"Tabs\"},{\"title\":\"步骤\",\"link\":\"/fei-ui-design/components/steps\",\"icon\":\"arrowright\",\"alias\":\"Steps\"}]},{\"title\":\"Feedback Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"警告信息\",\"link\":\"/fei-ui-design/components/alert\",\"icon\":\"error-fill\",\"alias\":\"Alert\"},{\"title\":\"标记\",\"link\":\"/fei-ui-design/components/badge\",\"icon\":\"border\",\"alias\":\"Badge\"},{\"title\":\"模态框\",\"link\":\"/fei-ui-design/components/modal\",\"icon\":\"idcard\",\"alias\":\"Modal\"},{\"title\":\"消息提示\",\"link\":\"/fei-ui-design/components/message\",\"icon\":\"message\",\"alias\":\"Message\"},{\"title\":\"弹框提示\",\"link\":\"/fei-ui-design/components/message-box\",\"icon\":\"mail\",\"alias\":\"MessageBox\"},{\"title\":\"通知\",\"link\":\"/fei-ui-design/components/notice\",\"icon\":\"notification\",\"alias\":\"Notice\"},{\"title\":\"弹出提示\",\"link\":\"/fei-ui-design/components/tooltip\",\"icon\":\"info-circle\",\"alias\":\"Tooltip\"},{\"title\":\"弹出信息\",\"link\":\"/fei-ui-design/components/popover\",\"icon\":\"question-circle\",\"alias\":\"Popover\"},{\"title\":\"抽屉\",\"link\":\"/fei-ui-design/components/drawer\",\"icon\":\"build\",\"alias\":\"Drawer\"},{\"title\":\"骨架屏\",\"link\":\"/fei-ui-design/components/skeleton\",\"icon\":\"sever-fill\",\"alias\":\"Skeleton\"},{\"title\":\"加载\",\"link\":\"/fei-ui-design/components/loading\",\"icon\":\"loading\",\"alias\":\"Loading\"},{\"title\":\"进度条\",\"link\":\"/fei-ui-design/components/progress\",\"icon\":\"hourglass\",\"alias\":\"Progress\"},{\"title\":\"进度环\",\"link\":\"/fei-ui-design/components/circle\",\"icon\":\"redo\",\"alias\":\"Circle\"}]},{\"title\":\"Built-in Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"空状态\",\"link\":\"/fei-ui-design/components/empty\",\"icon\":\"border\",\"alias\":\"Empty\"},{\"title\":\"滚动组件\",\"link\":\"/fei-ui-design/components/scrollbar\",\"icon\":\"container\",\"alias\":\"Scrollbar\"},{\"title\":\"弹层\",\"link\":\"/fei-ui-design/components/popper\",\"icon\":\"pic-center\",\"alias\":\"Popper\"}]},{\"title\":\"Configure Components\",\"collapsable\":false,\"navType\":\"components\",\"children\":[{\"title\":\"全局配置\",\"link\":\"/es/components/config-provider\",\"icon\":\"setting\",\"alias\":\"ConfigProvider\"}]}]}}},\"lastUpdated\":true,\"lastUpdatedText\":\"最后更新\",\"linkPrevVersion\":\"https://lusaxweb.github.io/vuesax/\",\"searchPlaceholder\":\"Search\"},\"locales\":{\"/\":{\"lang\":\"zh-CN\",\"text\":\"中文\"},\"/es/\":{\"lang\":\"en-US\",\"text\":\"English\"}},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
    
  </body>
</html>